<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>斌斌学院_JS基础_test04</title>
    <style type="text/css">
        span{
            display: inline-block;
            margin: 10px 5px;
            padding: 0px 10px;
            height: 30px;
            line-height: 30px;
            background-color: red;
            cursor: pointer;
        }
        textarea{
            width: 250px;
            height: 80px;
        }
        .span_style{
            background-color: #0000FF;
        }
    </style>
</head>
<body>
<div class="page">
   <textarea id="source"></textarea>
    <button id="left_in">左侧入</button>
    <button id="right_in">右侧入</button>
    <button id="left_out">左侧出</button>
    <button id="right_out">右侧出</button>
    <form><input type="text" id="find"/>
    <input type="button"value="查询"id="match_text"></form>
</div>
<div class="data">
</div>
<script>
    function leftIn(queue) {
        var text=document.getElementById('source').value;
        var data=text.toString().split(/[,\s+、，\r]/);
        for(var i=data.length-1;i>=0;i--)
        {
            var span=document.createElement('span');
            span.innerHTML=data[i];
            var spanlist=queue.childNodes;
            queue.insertBefore(span,spanlist[0]);
        }
    }
    function rightIn(queue) {
        var text=document.getElementById('source').value;
        var data=text.toString().split(/[,\s+、，\r]/);
        for(var i=0;i<data.length;i++)
        {
            var span = document.createElement('span');
            span.innerHTML = data[i];
            queue.appendChild(span);
        }
    }
    function rightOut(queue) {
        var spanlist=queue.childNodes;
        queue.removeChild(spanlist[spanlist.length-1]);
    }
    function leftOut(queue) {
        var spanlist=queue.childNodes;
        queue.removeChild(spanlist[0]);
    }
    function matchData(queue) {
        var spanlist=queue.childNodes;
        var text=document.getElementById('find').value;
        var reg=new RegExp(text);
        for(var i=0;i<spanlist.length;i++)
        {
            if(reg.test(spanlist[i].innerHTML))
            {
                spanlist[i].className="span_style";
            }
            else{
                spanlist[i].className="span";
            }
        }
    }
    function Init() {
        var queue=document.getElementsByClassName('data')[0];
        document.getElementById('left_in').onclick=function () {

            leftIn(queue);
        };
        document.getElementById('right_in').onclick=function () {
            rightIn(queue);
        };
        document.getElementById('left_out').onclick=function () {
            leftOut(queue);
        };
        document.getElementById('right_out').onclick=function () {
            rightOut(queue);
        };
        document.getElementById('match_text').onclick=function () {
            matchData(queue);
        };
    }
    Init();
</script>
</body>
</html>